<template>
    <div class="template-C">
        <div style="display: flex; justify-content: end;">
            <el-button @click="modify" v-show="isbut" type="primary">修改</el-button>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 50px;">
            <el-form :model="form" label-width="auto" style="display: flex; justify-content: space-between;">
                <el-form-item label="地震类型：" prop="type">
                    <el-select placeholder="请选择" v-model="form.type" @change="handleTypeChange" style="width: 300px;"
                        :disabled="isShow">
                        <el-option label="正式" value="1"></el-option>
                        <el-option label="测试" value="2"></el-option>
                        <el-option label="演练" value="3"></el-option>
                        <el-option label="自动" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前期数:" style="margin-left: 100px;" prop="current">
                    <el-input v-model="selectedData.period" placeholder="请输入" style="width: 300px;"
                        :disabled="isShow" />
                </el-form-item>
            </el-form>
        </div>
        <div style="display: flex; justify-content: center;">
            <el-form-item label="定义:" style="margin-top: 30px;">
                <el-input v-model="selectedData.macrosStr" style="width: 740px" placeholder="请输入" show-word-limit
                    type="textarea" :disabled="isShow" />
            </el-form-item>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 50px;" v-show="showBut">
            <el-button @click="storage" type="primary">保存</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue';
import { ElFormItem, ElInput, ElButton } from 'element-plus';
import * as datarApi from "@/api/report";

const dataList = ref([])
// 根据id所得到的值
const selectedData = ref([])
const isbut = ref(true)
const isShow = ref(true)
const form = reactive({
    type: '1',
    // current: '0'
})
// 存储定义文本
const definition = ref('{"审核": "刘晓雨", "签发": "兰从欣", "编辑": "值班员", "单位名称": "中国地震台网中心", "报送单位": "应急管理部指挥中心、中国地震局办公室、监测司、震防司、科技司"}')
// 控制保存关闭的显示和隐藏
const showBut = ref(false)

// 初始化
const ongetDataList = async () => {
    try {
        const response = await datarApi.getDataList()
        dataList.value = response.list
        selectedData.value = dataList.value.find(item => item.id === parseInt(form.type));
    }
    catch (error) {
        console.log('失败');
        // 在这里处理异常
    }
}

// 根据所选值获取不同数据
const handleTypeChange = (newValue) => {
    selectedData.value = dataList.value.find(item => item.id === parseInt(newValue));
}
// 修改
const modify = () => {
    showBut.value = true
    isbut.value = false
    isShow.value = false
}
// 保存
const storage = async () => {
    let setUpData = selectedData.value
    // setUpData.macros = {}
    // let obj = JSON.parse(setUpData.macrosStr)
    // console.log(setUpData,'123');
    // let obj = JSON.parse(setUpData.macrosStr);
    setUpData.macros = setUpData.macrosStr
    // let obj = JSON.parse(setUpData.macros)
    // console.log(setUpData,'111');
    // console.log(obj,'222');
    // return
    try {
        let state = await datarApi.modifySetUp(setUpData)
        if (state == true) {
            showBut.value = false
            isbut.value = true
            isShow.value = true
        }
        ongetDataList()
    }
    catch (error) {
        console.log('失败');
        // 在这里处理异常
    }
    
    // showBut.value = false
} 
const close = () => {
    console.log('关闭');
    isShow.value = true
    showBut.value = false
    isbut.value = true
}

onMounted(() => {
    ongetDataList()
})
</script>

<style scoped>

</style>
